.top-slides
  height: 180px !important;

  overflow: hidden;
  .cube-slide
    height: 100%
    .cube-slide-group
      height: 100%;
      .cube-slide-item
        height: 100%
        a
          display: block;
          box-bg(100%)
    .cube-slide-dots
      bottom: 5px
      padding: 5px 0
      > span
        height: 4px
        background-color: rgba(#fff,.8);
        transition: all .3s
        + span
          margin-left: 5px
        &.active
          background-color: $primary !important

.tag
  height: 16px
  line-height: 18px
  display: inline-block;
  padding: 0 5px
  text-align: center;
  font-size: $font-xs
  background-color: #fff;
  color: $text-light;
  box-sizing: content-box;
  fine-border-box(#bbb,3px)

h4.title
  font-size: $font-md
  font-weight: bold;
  color: $text-dark
  margin-bottom: $spacing-sm

.footer-bar
  height: $footer-height
  background: #fff
  fine-border(top, $border-light)
  position: fixed !important
  left: 0
  right: 0
  bottom: 0
  z-index: 99
  .btns-bottom
    height: 100%
    display: flex
    align-items: stretch;
    .nav-flex
      height: 100%
      flex: 1
      display: flex
      align-items: center
      justify-content: center
      .nav-item
        flex: 1
        padding: 0
        & + &
          fine-border(left, $border-light)
    .btn-flex
      height: 100%
      display: flex
      flex: 1
      align-items: center
      justify-content: center
      .btn
        flex: 1
        height: 100%
        border-radius: 0
.total-bar
  background: #fff
  position: fixed !important
  left: 0
  right: 0
  bottom: 0
  height: 50px
  display: flex
  align-items: center
  justify-content: space-between
  padding-left: 10px
  fine-border(top, $border-light)
  &.has-tabbar
    bottom: 48px
  .left
    display: flex
    width: 100px
    align-items: center
    padding-left: 10px
  .right
    display: flex
    align-self: stretch
    .weui-btn
      width: 100%
      border-radius: 0
      border: none
      position: relative
      z-index: 99
      &:after
        content: none
  .center
    flex: 1
    text-align: right
    padding-right: 10px
    .price-row
      padding-top: 3px
    p
      font-size: 12px
      color: #999

.btn-tag
  font-size: $font-xs
  padding: 4px 6px
  border-radius: 2px


//表单相关
.select-group
  display: flex
  line-height: 2;
  height: 44px
  align-items: center;
  .label
    margin-right: 10px
    font-size: $font-md
  .select-tap
    flex: 1
    display: flex;
    align-items: center;
    .select-item
      fine-border-box(#ddd,3px);
      color: $text-dark;
      font-size: $font-sm
      padding: 0 10px
      line-height: 36px;
      flex: 1;
      &:before
        content: ""
        width: 5px
        height: 5px
        border: solid #ddd
        border-width: 0 2px 2px 0
        position: absolute;
        right: 10px
        top: 50%
        transform: rotate(45deg) translate(0,-50%);
      + .select-item
        margin-left: 10px;




.round-btn
  circular(50px)
  box-shadow: 0 0 0 10px rgba(#fff,.2),
              0 0 0 20px rgba(#fff,.1)
  &.sm
    size(40px)
  &.md
    size(80px)
  &.lg
    size(120px)



.user-header
  background: $bg-red-purple-bottom
  height: 200px
  position: relative
  display: flex;
  align-items: center;

  .center-info
    text-align: center
    width: 100%;
    padding-top: 20px
    .avatar

      margin: 0 auto 15px
      box-shadow: 0 0 0 5px rgba(white, 0.3), 0 0 0 10px rgba(white, 0.2)
    .nick-name
      font-size: $font-md
      color: #fff
      margin-bottom: 8px
    .info
      font-size: $font-xs
      color: rgba(white, 0.8)
  .info-row
    display: flex
    padding: $spacing
    align-items: center
    .avatar
      width: 50px
      height: 50px
      margin-right: 10px
  &:after
    content: ""
    width: 100%
    height: 50px
    position: absolute
    left: 0
    bottom: 0
    background: url("http://ou04zya91.bkt.clouddn.com/ripple-bg.png") no-repeat center bottom
    background-size: 100% auto

.info-flex
  display: flex
  flex: 1
  text-align: center
  padding: 10px 10px 20px
  .info-col
    align-items: center
    flex-flow: row nowrap
    flex: 1
    position: relative
    &:not(:last-child)
      &:before
        content: ""
        right-middle(0)
        width: 1px
        height: 24px
        background-color: $border-light
        transform: scaleX(.5);
    .number
      font-size: 20px
      font-weight: 600
      color: $dark
    .label
      font-size: 12px
      color: $text-light
      margin-top: 10px

// 上传组件
.cube-upload
  padding: 0;
  // overflow: hidden;
  box-sizing: border-box;
  .cube-upload-def
    margin-left: -5px
    margin-right: -5px
    .cube-upload-file-progress
      font-size: $font-sm
    .cube-upload-file , .cube-upload-btn
      padding: 5px
      box-sizing: border-box;
      width: 25%;
      margin: 0 !important;
      .cube-upload-file-def
        width: 100% !important
        background-color: #f1f1f1
    .cube-upload-btn-def
      width: 100% !important;
      box-shadow: none
      position: relative;
      background-color: #f1f1f1

// 文件上传
.upload-files
  padding: 10px 0;

  .uploader-btn
    margin: 10px 0
    width: 100%
    padding: 8px 10px
    border-color: $primary
    color: $primary
    background-color: transparent !important
    border-radius: 3px
    &:active
      background-color: $primary !important
      color: #fff;
  .uploader-list
    ul
      clearfix()
      li
        box-sizing: border-box;
        border: none
    .uploader-file
      border: none
      border-radius: 3px
      background-color: #f9f9f9
      box-sizing: border-box;
      height: 60px;
      line-height: 60px
      .uploader-file-progress
        background-color: #e5f4ee
      &[status=error]
        .uploader-file-progress
          background-color: #fff0f0
      .uploader-file-info
        padding: 0 10px
        display: flex
        align-items: center;
        justify-content: space-between;
        div
          width: auto
          font-size: $font-sm
          color: $text-dark
          &.uploader-file-meta,
          &.uploader-file-status,
          &.uploader-file-actions
            display: none
          &.uploader-file-size
            color: $text-light
        .uploader-file-name
          flex: 1
          display: flex;
          align-items: center;
          line-height: 1
          ellipsis()
          .uploader-file-icon
            font-size: 20px;
            color: #999
            margin: 0 10px 0 0;
            font-family: "icon"
            &:before
              content: "\e7a4"
